<template>
  <hsa-dialog v-model:visible="dialogVisible" title="日志" width="500">
    <!-- 对话框内容 -->
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="日志记录" fill>
          <hsa-table v-bind="logRecordingTableOption"></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="执行时长" fill>
          <hsa-table v-bind="executionTableOption"></hsa-table>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>
    <hsa-adaptive-pane>
      <hsa-title-pane fill>
        <hsa-title-pane-item title="脚本日志" fill>
          <el-input type="textarea" disabled></el-input>
        </hsa-title-pane-item>
      </hsa-title-pane>
    </hsa-adaptive-pane>

    <!-- 对话框底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </span>
    </template>
  </hsa-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { HsaTableColumn } from "hsa-ui";
// 控制对话框的显示与隐藏
const dialogVisible = ref(false);
// 表单数据
const formData = ref({
  name: "",
  age: "",
});

// 关闭对话框时的处理函数
const handleClose = () => {
  // 可以在这里添加关闭对话框时的逻辑，如重置表单
  formData.value = {
    name: "",
    age: "",
  };
};
const logRecordingTableOption = reactive({
  showIndex: true,
  data: ref<any[]>([
    {
      reqTime: "2016-05-03 17:22:45",
      relevantTime: "2016-05-03 17:22:45",
      isSuccess: "成功",
    },
    {
      reqTime: "2016-05-03 17:22:45",
      relevantTime: "2016-05-03 17:22:45",
      isSuccess: "成功",
    },
    {
      reqTime: "2016-05-03 17:22:45",
      relevantTime: "2016-05-03 17:22:45",
      isSuccess: "失败",
    },
    {
      reqTime: "2016-05-03 17:22:45",
      relevantTime: "2016-05-03 17:22:45",
      isSuccess: "成功",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "请求时间", prop: "reqTime" },
    { align: "center", label: "相应时间", prop: "relevantTime" },
    { align: "center", label: "是否成功", prop: "isSuccess" },
  ]),
  paginationEnable: false,
});
const executionTableOption = reactive({
  showIndex: false,
  data: ref<any[]>([
    {
      interfaceRunningDuration: "22:45",
      executionDuration: "22:45",
      executionCount: "2",
      averageDuration: "22:45",
    },
    {
      interfaceRunningDuration: "22:45",
      executionDuration: "22:45",
      executionCount: "2",
      averageDuration: "22:45",
    },
  ]),
  columns: ref<HsaTableColumn[]>([
    {
      align: "center",
      label: "接口运行时长",
      prop: "interfaceRunningDuration",
    },
    { align: "center", label: "执行时长", prop: "executionDuration" },
    { align: "center", label: "执行次数", prop: "executionCount" },
    { align: "center", label: "平均时长", prop: "averageDuration" },
  ]),
  paginationEnable: false,
});

// 提交表单时的处理函数
const handleSubmit = () => {
  console.log("表单数据:", formData.value);
  // 提交表单后关闭对话框
  dialogVisible.value = false;
};
const open = () => {
  dialogVisible.value = true;
};
defineExpose({
  open,
});
</script>
